import React, { useState } from 'react'
import { Layout, theme, Dropdown, Space, Avatar } from 'antd';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UserOutlined
} from '@ant-design/icons';
import "./TopHeader.css"
import { useNavigate } from 'react-router-dom';
const { Header } = Layout;
export default function TopHeader(props) {
    const navigate = useNavigate()
    const { onCollapsedClick, collapsed } = props;
    const quite = () => {
        console.log("点击了退出按钮");
        localStorage.removeItem("token");
        navigate("/login")
    }
    const items = [
        {
            key: '1',
            label: (
                <a target="_blank" >
                    超级管理员
                </a>
            ),
        },
        {
            key: '2',
            danger: true,
            label: (
                <a onClick={() => { quite() }}>
                    退出
                </a>
            ),
        },
    ];

    const { token: { colorBgContainer }, } = theme.useToken();
    const changerCollapsed = () => {
        console.log("点击的合并 展开按钮")
        onCollapsedClick();
    }

    return (
        <Header
            style={{
                paddingLeft: 16,
                paddingRight: 16,
                background: colorBgContainer,
            }}>
            {collapsed
                ? <MenuUnfoldOutlined
                    className='trigger'
                    onClick={changerCollapsed} />
                : <MenuFoldOutlined className='trigger'
                    onClick={changerCollapsed} />}
            <div style={{ float: 'right' }}>欢迎admin 回来

                <Dropdown
                    menu={{
                        items,
                    }}
                >
                    <a onClick={(e) => e.preventDefault()}>
                        <Space
                            style={{ paddingLeft: 5 }}
                        >
                            <Avatar
                                style={{ paddingBottom: 5 }}
                                size="large"
                                icon={<UserOutlined />} />
                            {/* <DownOutlined /> */}
                        </Space>
                    </a>
                </Dropdown>
            </div>

        </Header>
    )
}
